﻿<!DOCTYPE html>
<html>

<head id="Head1" runat="server">
  <title>各指标明细</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="Shortcut Icon" href="../images/tempoBI.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../StaticFiles/layui/dist/css/layui.css" />
  <script type="text/javascript" src="../Scripts/json2.js"></script>
  <script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
  <style type="text/css">
    html {
      background-image: url(../images/bg.jpg);
      background-repeat: no-repeat;
    }

    #header {
      height: 60px;
      background-image: url(../images/抬头.png);
      background-size: 100% 60px;
      background-repeat: no-repeat;
      color: #fff;
      font-weight: bold;
      text-align: center;
      font-size: 28px;
      line-height: 60px;
    }

    #title {
      height: 40px;
      color: #fff;
      font-weight: bold;
      text-align: left;
      font-size: 18px;
      position: absolute;
      top: 20px;
      left: 15px;
      line-height: 40px;
    }

    .layui-table-cell {
      text-align: center;
      color: #fff;
    }

    .layui-table {
      background-color: transparent !important;
    }

    .layui-table-view {
      margin-top: 0px;
    }

    .layui-table-header {
      background-color: transparent !important;
    }

    .layui-table-header .layui-table-cell {
      color: rgb(60, 176, 255);
      font-size: 20px;
      font-family: '微软雅黑';
      font-weight: bold;
    }

    .layui-table tr:hover {
      background-color: transparent !important;
    }

    .layui-table thead tr {
      background-color: transparent !important;
    }

    .layui-laypage a,
    .layui-laypage span {
      color: #fff;
    }

    .layui-laypage .layui-laypage-skip {
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="layui-row" style="padding: 0 15px; margin-bottom: 10px;">
    <div class="layui-col-md12">
      <div id="header">
      </div>
    </div>
  </div>
  <div id="title">
  </div>
  <form class="layui-form" action="">
    <div class="layui-fluid">
      <div class="layui-row">
        <div class="layui-col-md12">
          <table class="layui-table" id="grid" lay-data="{text:{ none: '暂无相关数据'}}" lay-filter="grid">
            <thead>
              <tr>
                <th>
                  月份
                </th>
                <th>
                  指标项
                </th>
                <th>
                  工区
                </th>
                <th>
                  日期
                </th>
                <th>
                  状态
                </th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
    <iframe id="iframe" src="" style="display: none;"></iframe>
  </form>
  <!-- 页眉区域 end-->
  <script type="text/javascript" src="../StaticFiles/layui/dist/layui.js"></script>
  <script type="text/javascript">
    $(function () {
      layui.use(['form', 'layer', 'table', 'laydate'], function () {
        var $ = layui.$;
        var form = layui.form;
        var laydate = layui.laydate;
        var table = layui.table;
        var layer = layui.layer;
        var uid = layui.url().search.uid; //用户id
        var factoryid = layui.url().search.factoryid;
        var grid = null;

        $("#header").text(decodeURIComponent(layui.url().search.type) + ' - ' + decodeURIComponent(layui.url().search.itemname));
        $("#title").text(decodeURIComponent(layui.url().search.workcenter) + ' -- ' + decodeURIComponent(layui.url().search.itemname) + '明细');

        var index = layer.load(0, { shade: [0.2, '#000'], time: 100 * 1000 });
        grid = table.render({
          elem: '#grid'
          , url: "../handler/board/SQCDPDetails.ashx"
          , method: 'POST'
          , cols: [[
            { type: 'numbers', title: '序号', width: 100 }
            , { field: 'CREATEMONTH', title: '月份' }
            , { field: 'ITEMNAME', title: '指标项名称' }
            , { field: 'WORKCENTERNAME', title: '工区' }
            , {
              field: 'CREATEDATE', title: '创建时间',
              templet: function (d) {
                if (d.CREATEDATE === null) {
                  return "";
                } else {
                  return d.CREATEDATE.split('T')[0];
                }
              }
            }
            , {
              field: 'STATUS', title: '状态', style: 'color:#fff;',
              templet: function (d) {
                if (d.STATUS == '未完成') {
                  return '<span style="background-color: rgb(255,0,0);padding:5px;border-radius:5px;">' + d.STATUS + '</span>'
                } else {
                  return '<span style="background-color: rgb(0,255,0);padding:5px;color:#000;border-radius:5px;">' + d.STATUS + '</span>'
                }
              }
            }
          ]]
          , where: {
            itemname: decodeURIComponent(layui.url().search.itemname),
            workcenter: decodeURIComponent(layui.url().search.workcenter),
            status: decodeURIComponent(layui.url().search.status)
          }
          , text: {
            none: '暂无相关数据'
          }
          , request: {
            pageName: 'page', //页码的参数名称，默认：page
            limitName: 'rows' //每页数据量的参数名，默认：limit
          }
          , page: {
            theme: '#009688'
          }
          , limit: 20
          , limits: [20]
          , done: function (res, curr, count) {
            layer.close(index);
            var that = this.elem.next();
            res.data.forEach(function (item, index) {
              if (index % 2 !== 0) {
                var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css({ "background": "rgba(60, 176, 255, 0.3)" });
              }
            });
          }
        });
      });
    });
  </script>
</body>

</html>